<template>
    <div ref="chart" class="chart"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
    categories: Array,
    dataSeries: Array
});

const chart = ref(null);

onMounted(() => {
    initChart();
});

onBeforeUnmount(() => {
    if (chart.value) {
        echarts.dispose(chart.value);
    }
});

const initChart = () => {
    const chartDom = chart.value;
    const chartInstance = echarts.init(chartDom);

    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            icon: 'rect',
            textStyle: {
                color: 'white',
                fontSize: 15,
                fontFamily:''
            },
            itemGap: 30,
            itemWidth: 17,
            itemHeight: 10,
            data: props.dataSeries.map(series => series.name)
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: props.categories,
            axisLabel: {
                color: 'white',
                fontSize: 15,
                fontFamily:''
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(204, 204, 204, 0.3)'
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                show: false
            },
            axisLabel: {
                color: 'white',
                fontSize: 15,
                fontFamily:''
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(204, 204, 204, 0.3)'
                }
            }
        },
        series: [
            ...props.dataSeries.map((series, index) => ({
                name: series.name,
                type: 'bar',
                stack: 'total',
                barWidth: 15,
                data: series.data,
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(100, 100, 100, 0.2)',
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 1, // x0, y0, x1, y1 控制渐变方向，这里是斜向渐变
                        [
                            { offset: 0, color: series.startColor }, // 开始颜色
                            { offset: 1, color: series.endColor } // 结束颜色
                        ]
                    )
                }
            }))
        ]
    };

    chartInstance.setOption(option);

    window.addEventListener('resize', () => {
        chartInstance.resize();
    });

    onBeforeUnmount(() => {
        window.removeEventListener('resize', () => {
            chartInstance.resize();
        });
    });
};

watch([() => props.categories, () => props.dataSeries], ([newCategories, newDataSeries]) => {
    if (newCategories && newDataSeries) {
        initChart();
    }
});
</script>

<style scoped>
.chart {
    width: 100%;
    height: 100%;
}
</style>